import React from 'react'
// 导入axios
// import axios from 'axios'
import { API } from '../../utils/api'

// 导入封装好的navbar
import NavHeader from '../../components/NavHeader'
// 导入加载的样式
import { Toast } from 'antd-mobile'

// 导入样式
// import "./index.scss"
import styles from './index.module.css'
import { NavLink } from 'react-router-dom'

// 导入环境变量中的url
import { BASE_URL } from '../../utils/url'
import HouseItem from '../../components/HouseItem'

// 覆盖物样式
const labelStyle = {
    cursor: 'pointer',
    border: '0px solid rgb(255,0,0)',
    padding: '0px',
    whiteSpace: 'nowrap',
    fontSize: '12px',
    color: 'rgb(255,255,255)',
    textAlign: 'center'
}


export default class Map extends React.Component {

    state = {
        // 小区下的房源信息列表
        houseList: [],
        // 表示是否展示房源列表
        isShowList: false
    }

    // 当页面元素挂载后，在进行元素渲染操作
    // 注意在react中使用全局对象，需要使用window来访问，否则Eslint校检会报错
    componentDidMount() {
        this.initMap()
    }

    // 初始化地图
    initMap() {
        /**
       *   1、获取当前定位城市
       *   2、使用地址解析器解析当前城市坐标
       *   3、调用centerAndZoom()方法在地图中展示当前城市，并设置缩放级别为11
       *   4、在地图中展示该城市，并添加比例和平移缩放控件
       */

        // 获取当前定位城市
        const { label, value } = JSON.parse(localStorage.getItem('hkzf_city'))

        // 初始化地图实例
        // 注意：在react 脚手架中全局对象需要使用window来访问，否则，会造成Eslint校验错误
        var map = new window.BMapGL.Map("container");
        // 能够在其他地放通过this访问
        this.map = map

        //创建地址解析器实例
        const myGeo = new window.BMapGL.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint(label, async (point) => { //传入地址后会进行解析
            if (point) {
                // 初始化地图，同时设置展示级别
                map.centerAndZoom(point, 11);
                // 添加一个标记物（覆盖物）
                // map.addOverlay(new window.BMapGL.Marker(point, { title: '北京市海淀区上地10街' }))
                var scaleCtrl = new window.BMapGL.ScaleControl();  // 添加比例尺控件
                map.addControl(scaleCtrl);
                var zoomCtrl = new window.BMapGL.ZoomControl();  // 添加缩放控件
                map.addControl(zoomCtrl);


                // 调用renderOverlays()
                this.renderOverlays(value)

            } else {
                alert('您选择的地址没有解析到结果！');
            }
        }, label)
        // 给地图对象添加移动事件
        map.addEventListener('movestart', () => {
            if (this.state.isShowList) {
                this.setState({
                    isShowList: false
                })
            }
        })
    }

    async renderOverlays(id) {
        try {
            // 开启loading效果
            Toast.show({
                icon: 'loading',
                content: '加载中…',
            })
            const { data: res } = await API.get(`/area/map?id=${id}`)
            // console.log("这是renderOverlays获取的数据", res);
            const data = res.body
            // 关闭loading
            Toast.clear()

            // 获取类型和级别
            const { nextZoom, type } = this.getTypeAndZoom()

            data.forEach(item => {
                // 创建覆盖物
                this.createOverlays(item, nextZoom, type)
            });
        } catch (e) {
            Toast.clear()
        }
    }

    // 获取要渲染的类型和放大级别
    getTypeAndZoom() {
        // 调用地图的getZoom()方法，来获取当前的缩放级别
        const zoom = this.map.getZoom()
        let nextZoom, type
        if (zoom >= 10 && zoom < 12) {
            // 区
            // 下一个缩放级别
            nextZoom = 13
            // 绘制圆形覆盖物
            type = 'circle'
        } else if (zoom >= 12 && zoom < 14) {
            // 镇
            nextZoom = 15
            type = 'circle'
        } else if (zoom >= 14 && zoom < 16) {
            // 小区,不需要放大
            type = 'rect'
        }
        return { nextZoom, type }
    }
    // 创建覆盖物
    createOverlays(data, zoom, type) {

        // 通过经纬度创建确定坐标
        const { coord: { longitude, latitude }, label: areaName, count, value } = data
        // 创建当前位置的坐标
        const areaPoint = new window.BMapGL.Point(longitude, latitude)

        if (type === 'rect') {
            // 小区
            this.createRect(areaPoint, areaName, count, value)
        } else {
            // 区和镇
            this.createCircle(areaPoint, areaName, count, value, zoom)
        }
    }

    // 创建区、镇覆盖物
    createCircle(point, name, count, id, zoom) {
        const opts = {
            position: point,//指定文本标注的位置
            offset: new window.BMapGL.Size(-35, -35)
        }

        // 说明：设置了setContent后，第一个文本内容参数就失效了,因此直接清空就行
        const label = new window.BMapGL.Label('', opts)

        // 给label添加唯一的标识
        label.id = id

        // 设置房源覆盖物内容
        label.setContent(`
                <div class="${styles.bubble}">
                    <p clsss="${styles.name}">${name}</p>
                    <p clsss="${styles.name}">${count}套</p>
                </div>
            `)
        // 设置覆盖物的样式
        label.setStyle(labelStyle)
        // 添加单击事件
        label.addEventListener('click', () => {

            // 调用renderOverlays() 方法，获取该区域下的房源信息
            this.renderOverlays(id)

            // 放大地图，以当前点击的覆盖物为中心放大地图
            this.map.centerAndZoom(point, zoom)
            // 清除所有覆盖物的信息
            this.map.clearOverlays()
        })
        // 添加覆盖物标记
        this.map.addOverlay(label)

    }

    // 创建小区覆盖物
    createRect(point, name, count, id) {
        const opts = {
            position: point,//指定文本标注的位置
            offset: new window.BMapGL.Size(-50, -28)
        }
        // 说明：设置了setContent后，第一个文本内容参数就失效了,因此直接清空就行
        const label = new window.BMapGL.Label('', opts)

        // 给label添加唯一的标识
        label.id = id

        // 设置房源覆盖物内容
        label.setContent(`
        <div class="${styles.rect}">
            <span class="${styles.housename}">${name}</span>
            <span class="${styles.housenum}">${count}套</span>
            <i class="${styles.arrow}"></i>
        </div>
    `)
        // 设置覆盖物的样式
        label.setStyle(labelStyle)
        // 添加单击事件
        label.addEventListener('click', (e) => {

            this.getHouseList(id)

            // 获取当前的点击对象
            const target = e.domEvent.changedTouches[0]
            // 直接调用地图的panBy() 移动到地图的中心
            this.map.panBy(window.innerWidth / 2 - target.clientX, (window.innerHeight - 330) / 2 - target.clientY)


        })
        // 添加覆盖物标记
        this.map.addOverlay(label)
    }

    //  获取小区房源数据
    async getHouseList(id) {
        try {
            Toast.show({
                icon: 'loading',
                content: '加载中…',
            })
            const { data: res } = await API.get(`/houses?cityId=${id}`)
            this.setState({
                houseList: res.body.list,
                isShowList: true
            })
        } catch (e) {
            Toast.clear()
        }


    }
    // 封装渲染房屋列表的方法
    renderHouseList() {
        return this.state.houseList.map(item=>(
            <HouseItem
                key={item.houseCode}
                src={BASE_URL + item.houseImg}
                title={item.title}
                desc={item.desc}
                tags={item.tags}
                price={item.price}
            ></HouseItem>
        ))
        // return this.state.houseList.map(item => <div key={item.houseCode} className={styles.house}>
        //     <div className={styles.imgWrap}>
        //         <img className={styles.img}
        //             src={BASE_URL + item.houseImg}
        //             alt=''
        //         />
        //     </div>
        //     <div className={styles.content}>
        //         <h3 className={styles.title}>
        //             {item.title}
        //         </h3>
        //         <div className={styles.desc}> {item.desc}</div>
        //         <div>
        //             {
        //                 item.tags.map((tag, index) => {
        //                     const tagClass = 'tag' + (index + 1)
        //                     return (<span key={tag} className={[styles.tag, styles[tagClass]].join(' ')}>
        //                         {tag}
        //                     </span>)
        //                 })
        //             }
        //         </div>
        //         <div className={styles.price}>
        //             <span className={styles.priceNum}>{item.price}</span>元/月
        //         </div>
        //     </div>
        // </div>)
    }


    render() {
        return <div className={styles.map}>
            {/* 顶部导航 */}
            <NavHeader >
                地图找房
            </NavHeader>
            {/* 地图容器 */}
            <div id='container' className={styles.container}></div>

            {/* 房源列表 */}
            {/* 添加 styles.show 展示房屋的列表 */}
            <div className={[styles.houseList, this.state.isShowList ? styles.show : ''].join(' ')}>
                <div className={styles.titleWrap}>
                    <h1 className={styles.listTitle}>房屋列表</h1>
                    <NavLink className={styles.titleMore} to="/home/list">更多房源</NavLink>
                </div>
                <div className={styles.houseItems}>
                    {/* 房屋结构 */}
                    {this.renderHouseList()}
                </div>
            </div>
        </div>
    }
}